<template>
	<view style="background: transparent;" v-if="isLoad">
		<!-- hidden -->
		<l-painter hidden ref="painter" :pixel-ratio="2" css="width: 582rpx;height:858rpx;position: relative;">
			<l-painter-image :src="iconPath('posters.png')"
				css="width: 582rpx;height:858rpx;position: absolute;top:0;left:0;z-index:1;" />
			<l-painter-view
				css="width: 582rpx;height:858rpx;position: absolute;top:0;left:0;z-index:2;padding:75rpx 40rpx 0">
				<l-painter-text :text="posterData.text4"
					css="font-size: 24rpx;color: #333333;line-height: 33rpx;line-clamp: 1;padding-bottom:10rpx" />
				<l-painter-view css="width: 76rpx;height: 7rpx;background: var(--primary);"></l-painter-view>
				<l-painter-text :text="posterData.text1"
					css="font-weight: bold;font-size: 54rpx;color: #333333;line-height: 75rpx;line-clamp: 1;margin-top:45rpx;display:block;" />
				<l-painter-text :text="posterData.text3"
					css="font-weight: bold;font-size: 51rpx;color: var(--primary);line-height: 71rpx;line-clamp: 1;margin-top:10rpx;display:block;"></l-painter-text>
				<l-painter-text :text="posterData.text2"
					css="font-size: 24rpx;color: #666666;line-height: 33rpx;line-clamp: 1;margin-top:15rpx;display:block;"></l-painter-text>
				<l-painter-view css="padding-top:30rpx;height:210rpx;">
					<l-painter-view v-for="benefit in postData.benefits"
						css="width: 135rpx;background: var(--primary);border-radius: 4rpx;display:inline-block;vertical-align: top;margin-top:20rpx;margin-right:20rpx;text-align: center;">
						<l-painter-text :text="benefit.name"
							css="text-align:center;font-size: 24rpx;color: #FFFFFF;line-height: 50rpx;"></l-painter-text>
					</l-painter-view>

				</l-painter-view>
				<l-painter-view
					css="margin-top:10rpx;display:flex;align-items: center;width:100%;height:194rpx;position: relative;">
					<l-painter-image :src="posterData.img2" css="width:194rpx;height:194rpx;"></l-painter-image>
					<l-painter-view css="position: absolute;top:92rpx;left:210rpx;">
						<l-painter-text text="长按扫描二维码"
							css="font-size: 28rpx;color: #333333;line-height: 40rpx;display:block;"></l-painter-text>
						<l-painter-text text="查看工作详情"
							css="font-size: 28rpx;color: #333333;line-height: 40rpx;margin-top:10rpx;display:block;"></l-painter-text>
					</l-painter-view>


				</l-painter-view>
			</l-painter-view>

		</l-painter>
	</view>
</template>

<script>
	import lPainter from '@/uni_modules/lime-painter/components/l-painter/l-painter.vue';
	import lPainterView from "@/uni_modules/lime-painter/components/l-painter-view/l-painter-view.vue";
	import lPainterText from "@/uni_modules/lime-painter/components/l-painter-text/l-painter-text.vue";
	import lPainterImage from "@/uni_modules/lime-painter/components/l-painter-image/l-painter-image.vue";
	import {
		Painter
	} from "@/uni_modules/lime-painter/parser.js";
	export default {
		name: "poster",
		props: {
			posterData: {
				type: Object,
				default: {}
			}
		},
		components: {
			lPainter,
			lPainterView,
			lPainterText,
			lPainterImage
		},
		data() {
			return {
				isLoad: false,
				path: '',
				emitpath: '',
				cav: true
			};
		},
		watch: {
			posterData(newVal, old) {
				if (newVal) {
					this.isLoad = true;
					if (this.cav == true) {
						setTimeout(() => {
							this.saveFile()
							this.cav = false
						}, 500)
					}
				} else {
					this.isLoad = false
				}
			}
		},
		created() {
		
		},
		methods: {
			saveFile() {
				// 渲染
				
				uni.showLoading()
				// 生成图片
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: "png",
					pathType: 'url',
					quality: 1,
					success: (res) => {
						// 非H5 保存到相册
						this.$emit('pathImg', res.tempFilePath)
						uni.hideLoading()
					},
				});

			}
		},
	}
</script>

<style lang="scss" scoped>

</style>